.container {
		width: 100vw;
		height: 100vh;
		background-color: antiquewhite;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		position: relative;
		box-sizing: border-box;
		flex-direction: column;

		.game-info {
			margin-top:10rpx;
			width: 690rpx;
			background-color: #996923;
			border-radius: 10rpx;
			position: relative;
			
			font-size: 36rpx;
			color: #fcfdff;
			.game-section{
				padding:0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
			.game-header {
				padding: 0 15rpx;
				margin: 0 15rpx;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.game-title {
					width: 300rpx;
					font-size: 30rpx;
				}

				.game-vs {
					flex: 1;
					padding: 0 20rpx;
					box-sizing: border-box;
					height: 100rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.vs-avatar-img {
						position: relative;

						.pointer {
							position: absolute;
							top: 50rpx;
							width: 0px;
							height: 0px;
							border: 32rpx solid transparent;
							border-bottom-color: red;
							animation: flash 1.2s infinite;
						}

						@keyframes flash {
							0% {
								transform: translate(0px, 0px);
							}

							50% {
								transform: translate(0px, -10rpx);
							}

							100% {
								transform: translate(0px, 0px);
							}
						}
					}
				}

				.info-txt {
					width: 150rpx;
					font-size: 30rpx;
				}
			}

			.user-state {
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.userinfo {
					flex: 1;
					height: 120rpx;
					padding: 0 15rpx;
					box-sizing: border-box;
					overflow-x: scroll;
					display: flex;
					flex-wrap: nowrap;
					align-items: center;
					justify-content: flex-start;
					background-color: #EDC52D;

					.user-container {
						width: 100rpx;

						.avatar-img {
							width: 88rpx;
							height: 88rpx;
							border-radius: 50%;
							box-sizing: border-box;
							position: relative;
							text-align: center;

							.pointer {
								width: 0px;
								height: 0px;
								border: 50rpx solid transparent;
								border-bottom-color: red;

							}


						}

						.player-name {
							width: 100rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							font-size: 24rpx;
							color: #2fa14b;
						}
					}
				}

				.game-state {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: flex-start;
					flex-direction: column;
					height: 120rpx;
					box-sizing: border-box;
					background-color: #EDC52D;
					color: #541e24;
					font-weight: bold;

					.game-step {
						padding: 0 10rpx;
					}
				}
			}

		}

		.main {
			display: flex;
			justify-content: space-evenly;
			align-items: center;
			flex-wrap: wrap;
			width: 700rpx;
			height: 700rpx;
			box-sizing: border-box;
			position: absolute;
			bottom: 400rpx;
			background-color: red;
			z-index: 100;

			.chessboard {
				width: 700rpx;
				height: 700rpx;
				position: absolute;
				top: 0;
				left: 0;
				box-sizing: border-box;
				text-align: center;
				z-index: -1;

			}

			.box {
				width: 200rpx;
				height: 200rpx;
				margin: 0rpx;
				box-sizing: border-box;
				// background-color: blueviolet;
				text-align: center;
				line-height: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;

				&:hover {
					scale: 1.03;
					translate: all;
				}
			}

		}

		.chat-info{
			color:#422517;
			position: absolute;
			bottom: 280rpx;
			width:100vw;
			display: flex;
			justify-content: space-between;
			align-items: center;
			input{
				margin: 0 20rpx;
				border-radius: 14rpx;
				border: 1rpx solid #999;
			}
		}
		.system-notice{
			padding:0 10rpx;
			box-sizing: border-box;
			background-color: rgba(0, 0, 0, 0.9);
			font-size: 24rpx;
			color:white;
			position: absolute;
			bottom: 146rpx;
			width:100vw;
		}
		

		.tip-txt {
			box-sizing: border-box;
			height: 500rpx;
			text-align: center;
			font-size: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			color: white;
			font-weight: 600;

			.chess-bg {
				flex: 1;
				flex-grow: 1;
				height: 500rpx;
			}

			.chess-btn {
				width: 300rpx;
				height: 100rpx;
				background: linear-gradient(135deg, #fff6b7, #f6416c);
				border: 4rpx solid black;
				box-sizing: border-box;
			}
		}
		.chat-notice{
			position: absolute;
			bottom: 10rpx;
			height:140rpx;
			width:100%;
			box-sizing:border-box;
			 background-color: rgba(0, 0, 0, 0.5); /* 修改透明度的背景色 */
			&:before {
			    content: "";
			    display: block;
			    position: absolute;
			    top: 0;
			    left: 0;
			    width: 100%;
			    height: 100%;
			    background-color: rgba(0, 0, 0, 0.5); /* 修改透明度的背景色 */
			    z-index: -1; /* 将伪元素放置父div下方 */
			}
			.chat-txt{
				color:white;
			}
		}
	}

	.loader {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 88rpx;
		height: 88rpx;
		background: transparent;
		border: 4rpx solid rgba(0, 102, 255, 0.1);
		border-radius: 50%;
		text-align: center;
		color: white;
		background-origin: border-box;
		opacity: .95;
		letter-spacing: 2rpx;
		box-shadow: 0rpx 0rpx 20rpx rgba(0, 255, 0, .95);
	}

	/* 线 */
	.loader::before {
		content: '';
		position: absolute;
		top: -6rpx;
		left: -6rpx;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.icon-img {
		width: 44rpx;
		height: 44rpx;
		border-radius: 50%;
		box-sizing: border-box;
		position: relative;
		text-align: center;
	}

	.icon-loader {
		box-sizing: border-box;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 64rpx;
		height: 64rpx;
		background: transparent;
		border: 4rpx solid rgba(0, 102, 255, 0.1);
		border-radius: 50%;
		text-align: center;
		color: white;
		background-origin: border-box;
		opacity: .95;
		letter-spacing: 2rpx;
		box-shadow: 0rpx 0rpx 20rpx rgba(0, 255, 0, .95);
	}

	.loader::before {
		content: '';
		position: absolute;
		top: -6rpx;
		left: -6rpx;
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.white_chess {
		width: 64rpx;
		height: 64rpx;
		border-radius: 64rpx;
		opacity: 1;
		background: radial-gradient(34.09% 35.8%, rgba(255, 255, 255, 1) 0%, rgba(208, 208, 208, 1) 100%);
		box-shadow: inset -2px -2px 10px rgba(133, 133, 133, 0.25), inset -12px -14px 15.99px rgba(255, 255, 255, 0.32), 2px 2px 8px rgba(255, 255, 255, 0.7), 4px 4px 8px rgba(0, 0, 0, 0.49);
	}

	.black_chess {
		width: 64rpx;
		height: 64rpx;
		border-radius: 64rpx;
		opacity: 1;
		background: radial-gradient(34.09% 35.8%, rgba(120, 120, 120, 1) 0%, rgba(2, 2, 2, 1) 100%);
		box-shadow: inset -2px -2px 10px rgba(0, 0, 0, 0.25), inset -12px -14px 15.99px rgba(150, 150, 150, 0.32), 2px 2px 8px rgba(255, 255, 255, 0.7), 4px 4px 8px rgba(0, 0, 0, 0.49);
	}